<template>
	<view>
		<view :class="text" :style="style" v-if="show">
			我是index页面,块元素，独占一行，有宽高
		</view>
		<view v-else>
			你好
		</view>
		<button @click="dianji">按钮</button>
		<!-- selectable 长按出来复制按钮，微信小程序不可以出现 -->
		<text selectable>
			行内元素
		</text>
		<!-- decode 解码特殊符号 &lt;能转化。无法运行 -->
		<text decode>在一行&gt;</text>
		<!-- hover-start-time  多长时间之后才会出效果			 hover-stay-time  效果持续的时间 
		hover-stop-propagation  阻止冒泡的事件类型,只是本身效果改变，父类的效果不变
		-->
		<view hover-class="hclass"  :hover-start-time="2000" :hover-stay-time="3000">
			啦啦啦啦啦啦
		</view>
		<!-- 大按钮，占满整个屏幕 白底黑字  按钮size默认default  第二个值mini-->
		<button type="default" plain size="mini">我是按钮</button>
		<!-- 绿底白字 主按钮  loading 一般在从后台获取数据  from表单用得到  
		plain 边框
		-->
		<button type="primary" loading>我是按钮</button>
		<!-- 红底白字 -->
		<button type="warn" disabled>我是按钮</button>
		<!-- 默认所有的图片是同样的大小  300px  240px
		 可以是网络图片，可以是本地图片
		 可以相对路径， 可以绝对路径，但绝对路径前面要加@符号
		 -->
		<image src="../../static/images/demo01/t1.gif"></image>
		<!-- scaleToFill 不保持比例，填满屏幕
		aspectFit  保持比例  宽/高  多的一方满足条件不再动了
		aspectFill 保持比例  宽/高  小的一方满足条件不再动了
		heightFix 高度不变  宽度自动变化  保持原图宽高比不变
		widthFix  宽度不变  高度自动变化  保持原图宽高比不变
		 -->
		<image mode="heightFix" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg"></image>
		
		<form @submit="" @reset="">
			<input type="text" value="用户名" />
			<input type="password" value="密码" />
			<!-- 单选框 -->
			性别
			<!-- @change   当选择其中某一个的话，会触发change方法 -->
			<radio-group name="radio" @change="">
				<label>
					<radio value="男" :checked="'男'===radio" /><text>男</text>
					<radio value="女" /><text>女</text>
				</label>
			</radio-group>
			<!-- 多选框 -->
			<checkbox-group name="checkbox">
				<label>
					<checkbox value="未婚" /><text>未婚</text>
				</label>
				<label>
					<checkbox value="离婚" /><text>离婚·</text>
				</label>
			</checkbox-group>
			<!-- form-type 来触发提交或者重置的方法 -->
			<button form-type="submit">Submit</button>
			<button form-type="reset">Reset</button>
		</form>
		
		<!-- 富文本可以渲染出html标签的效果 -->
		<rich-text nodes="<h1>我是h1标签</h1>"></rich-text>
		<!-- 可以嵌套标签  h5新加的标签慎用，无法渲染成功 
		特殊的符号，在data中可以渲染成功，直接字符串，无法成功
		-->
		<rich-text :nodes="mynode"></rich-text>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text:"content",
				style:"font-size:30px",
				show:true,
				radio:"男",
				checkbox:[],
				mynode:`
				<div>
					自己的div
					<p>我是嵌套的p标签&gt;&lt;&copy;</p>
				</div>
				`
			}
		},
		onLoad(option) {
			console.log(option)
			const op=uni.getLaunchOptionsSync()
			console.log(op)
		},
		methods: {
			dianji(){
				this.style='font-size:30px;background:green'
				this.show=!this.show
			}
		}
	}
</script>

<style>
	.hclass{
		color: #007AFF;
	}
	.content{
		color: red;
	}
</style>
